<template>
  <div id="">
    <!-- 顶部导航栏组件 -->
    <van-nav-bar title="京东登录注册" @click-left="onClickLeft">
      <template #left>
        <img
          src=""
          class="nav-arrow"
        />
      </template>
    </van-nav-bar>

    <!-- 注册表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="手机号"
        placeholder="请填写手机号"
        :rules="[
          {
            required: true,
            pattern: mobileP,
            message: '请填写正确的11位手机号',
          },
        ]"
        @input="mobInput"
        label-width="60"
      />

      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        label-width="60"
        label-class="password"
        placeholder="6~12位，包含字母数字下划线"
        :rules="[
          { required: true, pattern: passwordP, message: '请正确填写密码' },
        ]"
        @input="pwdInput"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :color="btnColor"
          >立即登录</van-button
        >
      </div>
    </van-form>
    <div class="btn-wrap">
      <button class="toRegister" @click="toRegister">快速注册</button>
    </div>
    <van-divider :style="{ borderColor: '#999999', padding: '0 16px' }"
      >其他登录方式</van-divider
    >
    <div class="login-method">
      <i>
        <img
          src=""
          alt=""
        />
        <span>QQ</span>
      </i>
      <i>
        <img
          src=""
          alt=""
        />
        <span>微信</span>
      </i>
      <i>
        <img
          src=""
          alt=""
        />
        <span>苹果</span>
      </i>
    </div>
    <p class="agree-msg">
      未注册的手机号验证后将自动创建京东账号,登录即代表您已同意
      <span>京东隐私政策</span>
    </p>
  </div>
</template>

<script>
// 引入 顶部导航栏 组件
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);

// 引入表单组件
import { Form } from "vant";
Vue.use(Form);

import { Field } from "vant";
Vue.use(Field);

import { Button } from "vant";
Vue.use(Button);

import { Toast } from "vant";
Vue.use(Toast);

// 引入分割线组件
import { Divider } from "vant";
Vue.use(Divider);

export default {
  data() {
    return {
      // 手机号
      username: "",
      // 密码
      password: "",
      // 按钮颜色
      btnColor: "linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)",
      // 手机号正则
      mobileP: /^1[3456789]\d{9}$/,
      // 密码正则
      passwordP: /^\w{6,12}$/,
      // 手机号验证结果
      mobVer: false,
      // 密码验证结果
      pwdVer: false,
    };
  },
  methods: {
    onSubmit(values) {
      // 当验证通过时才成功发起请求
      if (this.mobVer && this.pwdVer) {
        this.$http({
          url: "http://42.193.117.107:3000/sql/log",
          method: "POST",
          headers: { "content-type": "application/x-www-form-urlencoded" },
          data: `username=${values.username}&password=${values.password}`,
          withCredentials: true,
        }).then((res) => {
          console.log(res);
          if (res.type === "secceed") {
            // console.log(res.type);
            // 请求成功说明有已经有session，改变store里面的 _session 为true
            // this.$store.state._session = true;
        sessionStorage.setItem('session_id',JSON.stringify(res.session.data));

            // 并将其储存在localstorge里面
            // localStorage.setItem("_session", "true");
            Toast.success(res.msg);
            let t1 = setTimeout(() => {
              // 判断地址栏是否有参数
              let returnUrl = this.$route.query.returnUrl;
              
              if (returnUrl) {
             

                this.$router.push(returnUrl);
                // this.$router.push("/login");
              } else {
                // 跳转到我的页面
                this.$router.push("/mine");
               
              }

              clearInterval(t1);
            }, 2100);
          } else {
            Toast.fail(res.msg);
            let t2 = setTimeout(() => {
              // 清空输入框内容
              this.username = "";
              this.password = "";
              clearInterval(t2);
            }, 2100);
          }
        });
      }
    },
    // 手机号输入事件
    mobInput(val) {
      if (this.mobileP.test(val)) {
        this.mobVer = true;
      } else {
        this.mobVer = false;
      }
    },
    // 密码输入事件
    pwdInput(val) {
      if (this.passwordP.test(val)) {
        this.pwdVer = true;
      } else {
        this.pwdVer = false;
      }
    },
    // 返回上一页
    onClickLeft() {
      this.$router.back();
    },
    // 点击注册按钮跳转到注册页面
    toRegister() {
      this.$router.push("/register");
    },
  },
  beforeUpdate() {
    // 当验证都通过时，改变按钮颜色
    if (this.mobVer && this.pwdVer) {
      this.btnColor = "linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)";
    } else {
      this.btnColor = "linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)";
    }
  },
  created() {
    this.$store.commit("setIsShow", false);
  },
  beforeDestroy() {
    this.$store.commit("setIsShow", true);
  },
};
</script>

<style scoped>
.nav-arrow {
  width: 24px;
}
.van-nav-bar__left {
  padding-left: 25px;
}
.van-nav-bar__title {
  font-size: 17px;
}
.van-form {
  padding: 25px;
  padding-bottom: 0px;
}
.van-cell {
  font-size: 16px;
  /* padding: 0; */
  line-height: 40px;
}
.van-cell::after {
  border-bottom: 1px solid #e1e1e1;
}
.van-button {
  margin-top: 40px;
  height: 50px;
}
.van-button--info {
  border: none;
  font-size: 18px;
  font-weight: 700;
  background-color: transparent;
  box-shadow: 0 0.1rem 20px 0 rgb(255 62 62 / 20%);
}
/* .password span {
  letter-spacing: 14px;
} */
.van-field__error-message {
  font-size: 16px;
}
.btn-wrap {
  text-align: center;
}
.toRegister {
  width: 293px;
  height: 50px;
  border-radius: 25px;
  border: none;
  outline: none;
  background-color: #333;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.van-divider {
  margin: 50px 30px 0;
}
.van-divider--hairline::after {
  margin-left: 30px;
}
.van-divider--hairline::before {
  margin-right: 30px;
}
.login-method {
  text-align: center;
  margin-top: 25px;
}
.login-method i {
  display: inline-block;
  width: 48px;
  margin: 0 15px;
  font-style: normal;
  font-size: 12px;
  color: #888;
}
.login-method i img {
  width: 100%;
}
.agree-msg {
  margin-top: 20px;
  padding: 0 30px;
  text-align: center;
  font-size: 13px;
  color: #999;
}
.agree-msg span {
  color: #4a90e2;
  /* font-weight: 700; */
}
</style>